<template>
  <el-card class="mb5">
    <el-descriptions :column="3">
      <el-descriptions-item>
        <template #label>
          <descriptions-item-label label="可提现" />
        </template>
        ￥{{ data?.withdrawable }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <descriptions-item-label label="提现中" />
        </template>
        ￥{{ data?.withdrawing }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <descriptions-item-label label="已提现" />
        </template>
        ￥{{ data?.withdrawn }}

        <span class="cursor-pointer b b-1 b-gray rd-5 b-solid pl2 pr2" @click="handleOpenWithdraw"
          >提现记录</span
        >
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <descriptions-item-label label="累计佣金数" />
        </template>
        ￥{{ data?.cumulativeCommissions }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <descriptions-item-label label="下线总数" />
        </template>
        {{ data?.downlinesNum }}人
      </el-descriptions-item>
    </el-descriptions>
  </el-card>

  <!-- 详情弹窗：查看 -->
  <Withdraw ref="formRefDetail" />
</template>
<script setup lang="ts">
import * as BrokerageRecordApi from '@/api/blind/brokerageRecord'
import Withdraw from './Withdraw.vue'

const { user } = withDefaults(defineProps<{ user?: any }>(), { user: null })

const data: object = ref({
  withdrawable: undefined,
  withdrawing: undefined,
  withdrawn: undefined,
  cumulativeCommissions: undefined,
  downlinesNum: undefined
})

/** 初始化 **/
onMounted(() => {
  getList()
})

const getList = async () => {
  data.value = await BrokerageRecordApi.getWithdrawal(user?.id)
}

// 打开提现记录
const formRefDetail = ref()
const handleOpenWithdraw = () => {
  formRefDetail.value.open(user?.id)
}
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
